/* custom option */
.custom-soft-option,
.custom-option {
  @apply rounded-box w-full cursor-pointer overflow-hidden border p-4;
  border: var(--border) solid var(--input-color, color-mix(in oklab, var(--color-base-content) 40%, #0000));

  &:hover {
    border-color: var(--input-color, color-mix(in oklab, var(--color-base-content) 40%, #0000));
    outline: 1px solid var(--input-color, color-mix(in oklab, var(--color-base-content) 40%, #0000));
  }

  & > .label-text {
    @apply p-0;
  }
}

.custom-option {
  &:has(:checked) {
    border-color: var(--input-color, var(--color-primary));
    outline: 1px solid var(--input-color, var(--color-primary));
  }
}

.custom-soft-option {
  background-color: color-mix(in oklab, var(--input-color, var(--color-neutral)) 5%, #0000);
  &:has(:checked) {
    border-color: var(--input-color, var(--color-primary));
    background-color: color-mix(in oklab, var(--input-color, var(--color-primary)) 10%, #0000);
    outline: 1px solid var(--input-color, var(--color-primary));
  }
}
